<template>
  <div>
    <div class="gap_input" @click="keyClick">
      <input v-model="currValue" />
    </div>
    <Keyboard :isShows="keyShow" v-on:updatekey="GetKeyVal" :keyvalues="currValue" @keyvaluess="keyvaluess"></Keyboard>
  </div>
</template>
<script>
import Keyboard from "./keyboards";
export default {
  props: {
  //   newInput: {
  //    type: String,
  //    default: "",
  //  },
    inputValue: {
      type: '',
      default: "",
    },
  },
  components: {
    Keyboard,
  },
  data() {
    return {
      keyShow: false,
      currValue: "",
    };
  },
  watch: {
    currValue(val) {
      console.log(1111,val)
    },
    inputValue(val) {
      this.currValue = val;
      console.log(1,val)
    },
    deep: true, //开启深度侦听
    immediate: true, // watch侦听操作内的函数会立刻被执行
  },
  mounted() {
    this.currValue = this.inputValue;
  },
  methods: {
    keyvaluess(val){
       this.currValue=val
      // console.log(this.currValue,'修改父组件中的值');
    },
    keyClick() {
      console.log(2)
      this.keyShow = !this.keyShow;
      if(this.keyShow ==false){
        console.log(this.inputValue)
        console.log(this.currValue)
        this.inputValue = this.currValue||'';
      }
    },
    GetKeyVal(val) {
      console.log(4444,val)
      if (val) {
        console.log(3,val)
        this.currValue = val.replace("undefined", "");
        this.$emit('keyList',this.currValue)
      }
    },
  },
};
</script>
<style lang="less" scoped>
.gap_input {
  width: 30% !important;
  input {
    background-color: transparent !important;
    width: 100px;
    border: 2px solid #ccc;
    // margin-right: 300px;
  }
  /deep/ .el-input__inner {
    border: 2px solid #333;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    color: #333;
    border-radius: 0;
    font-size: 26px;
  }
}
</style>
